<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取真实位置</title>
    <style>
        .moving-box {
            position: absolute;
            left: -860px;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: left 5s;
        }
    </style>
</head>
<body>
    <button id="move-button">Move Box</button>
    <button id="get-position">Get Position</button>
    <div class="moving-box" id="box"></div>

    <script>
        const box = document.getElementById('box');
        const moveButton = document.getElementById('move-button');
        const getPositionButton = document.getElementById('get-position');

        // 点击按钮移动盒子
        moveButton.addEventListener('click', () => {
            box.style.left = '1000px';
        });

        // 点击按钮获取当前位置
        getPositionButton.addEventListener('click', () => {
            const computedStyle = getComputedStyle(box);
            const currentLeft = parseFloat(computedStyle.left);
            box.style.left = `${currentLeft}px`;
            alert(`当前 left 值: ${currentLeft}px`);
        });
    </script>
</body>
</html>
